<template>
  <div class="label-template">
    <DFPageList ref="dfPageListRef" :page-options="pageOptions" />
    <TemplateModal ref="templateModalRef" :temp-info="tempInfo" :temp-name="tempName" />
  </div>
</template>

<script lang="ts" setup name="LabelTemplate">
  import lang from './lang';
  import TemplateModal from './components/TemplateModal.vue';
  import { useMixins } from '@/hooks/useMixins';
  import {
    defaultLabelTemplate,
    delLabelTemplate,
    pageLabelTemplate,
  } from '@/api/system/labelTemplate';

  const { loadLangFn, handleDeleteFn, router, dialogWarningFn, t } = useMixins();

  loadLangFn(lang);

  const dfPageListRef: any = ref(null);

  function reloadTableFn() {
    if (dfPageListRef.value) dfPageListRef.value.reloadTableFn();
  }

  const templateModalRef: any = ref(null);
  const tempInfo = ref(null);
  const tempName = ref('');

  const pageOptions = {
    searchForm: {
      formSchemas: [
        {
          component: 'NInput',
          label: 'templateName',
          prop: 'tempName',
        },
      ],
    },
    table: {
      columns: [
        {
          width: 120,
          label: 'templateName',
          prop: 'tempName',
        },
        {
          width: 120,
          label: 'templateDesc',
          prop: 'tempDetail',
        },
      ],
      action: {
        width: 226,
        widthEn: 260,
        columns: [
          {
            label: 'setDefault',
            disabled: (row: Recordable) => {
              return row.isDefault === 1;
            },
            click: async (row: Recordable) => {
              const { id, tempName } = row;
              await dialogWarningFn(
                {
                  content: t('labelTemplate.tipsMsg.confirmSetDefaultTip', { name: tempName }),
                },
                async () => {
                  await defaultLabelTemplate({ id });
                  reloadTableFn();
                }
              );
            },
          },
          {
            label: 'preview',
            click: async (row: Recordable) => {
              const { tempInfo: tInfo, tempName: tName } = row;
              templateModalRef.value?.openModal();
              tempInfo.value = JSON.parse(tInfo);
              tempName.value = tName;
            },
          },
          {
            label: 'edit',
            click: (row: Recordable) => {
              const { id } = row;
              router.push({ name: 'LabelTemplateForm', query: { id, pageType: 'edit' } });
            },
          },
          {
            label: 'copy',
            click: (row: Recordable) => {
              const { id } = row;
              router.push({ name: 'LabelTemplateForm', query: { id, pageType: 'copy' } });
            },
          },
          {
            label: 'delete',
            disabled: (row: Recordable) => {
              return row.isDefault === 1;
            },
            click: async (row: Recordable) => {
              const { id } = row;
              await handleDeleteFn({ id }, delLabelTemplate, reloadTableFn);
            },
          },
        ],
      },
      operaColumn: [
        {
          label: 'add',
          click: () => {
            router.push({ name: 'LabelTemplateForm' });
          },
        },
      ],
      requestFn: pageLabelTemplate,
    },
  };
</script>
